<template>
	<view>
		<navbox></navbox>
		<!-- 空购物车 -->
		<view class="empty" v-if="show"><u-empty mode="car" icon="http://www.52coding.cc/net163/img/custom-empty-image.276c05f0.png"></u-empty></view>
		<!-- 购物车商品 -->
		<view class="cart-content" v-else>
			<view class="commodity" v-for="(item, index) in checkboxList" :key="item.id">
				<view class="choose"><radio value="" /></view>
				<u-swipe-action>
					<u-swipe-action-item :options="options1">
						<view class="swipe-action u-border-top u-border-bottom">
							<view class="swipe-action__content">
								<view class="details">
									<img :src="item.url" alt="" width="88px" />
									<view class="description">
										<view class="title">{{ item.text }}</view>
										<view class="price">
											￥{{ item.price.toFixed(2) }}
											<text class="count">x{{ item.quantity }}</text>
										</view>
									</view>
									<!-- 步进器 -->
									<!-- <view class="stepFn">
									     <u-number-box v-model="value" @change="valChange"></u-number-box>
									    </view> -->
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</view>

		<view class="bottombox">
			<!-- 编辑 -->
			<view class="edit">
				<text>累计共1件商品, 可点击</text>
				<text>
					<u-button type="success" text="编辑" class="btn" v-show="btnShow" @click="ifShowBtn"></u-button>
					<u-button type="error" text="完成编辑" class="btnError" v-show="!btnShow" @click="ifShowBtn"></u-button>
				</text>
				<text>按钮进行商品数量修改</text>
			</view>
			<!-- 总价 -->
			<view class="buy">
				<u-radio-group placement="column" @change="groupChange">
					<u-radio :customStyle="{ marginBottom: '8px' }" label="全选" name="全选" @change="radioChange"></u-radio>
				</u-radio-group>
				<view>
					合计:
					<text class="price">
						￥
						<text class="big">1538</text>
						.00
					</text>
				</view>
				<view class="btn"><u-button type="primary" shape="circle" text="立即购买" color="linear-gradient(to right,rgb(255,96,52),rgb(238,10,36))"></u-button></view>
			</view>
		</view>

		<customTabBar></customTabBar>
	</view>
</template>

<script>
import customTabBar from '@/custom-tab-bar/index.vue';
import navbox from '@/nav-box/nav-box.vue';
import { ApiCart, ApiChecked, ApiChangeCartNum, ApiCartCheckedAll } from '@/utils/api.js';

export default {
	data() {
		return {
			show: false,
			btnShow: true,
			topList: ['30天无忧退货', '48小时快速退费', '满88元免邮费'],
			checkboxList: [
				{
					id: 0,
					url: 'http://yanxuan.nosdn.127.net/767b370d07f3973500db54900bcbd2a7.png',
					text: '蔓越莓曲奇 200克',
					price: 36.0,
					quantity: 1
				},
				{
					id: 1,
					url: 'http://yanxuan.nosdn.127.net/767b370d07f3973500db54900bcbd2a7.png',
					text: '蔓越莓曲奇 200克',
					price: 36.0,
					quantity: 2
				}
			],
			options1: [
				{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}
			]
		};
	},
	components: {
		customTabBar,
		navbox
	},
	methods: {
		radioChange() {},
		groupChange() {},
		ifShowBtn() {
			this.btnShow = !this.btnShow;
		}
	},
	onShow() {
		this.$store.commit('changeTabbarIndex', 3);
	},
	onLaunch() {
		if (this.checkboxList.length == 0) {
			this.show = true;
		} else {
			this.show = false;
		}
	}
};
</script>

<style lang="scss">
.empty {
	margin-top: 20vh;
}
.edit {
	padding-left: 23rpx;
	display: flex;
	height: 96rpx;
	background-color: #fff7cc;
	color: #f56723;
	line-height: 96rpx;
	font-size: 22rpx;
	.btn {
		margin: 15rpx 10rpx;
		width: 84rpx;
		height: 64rpx;
	}
	.btnError {
		margin: 15rpx 10rpx;
		width: 132rpx;
		height: 64rpx;
	}
}
.buy {
	padding: 0 28rpx;
	display: flex;
	align-items: center;
	justify-items: center;
	height: 100rpx;
	background-color: #fff;
	font-size: 24rpx;
	.price {
		margin: 0 20rpx;
		color: #ee0a24;
		.big {
			font-size: 35rpx;
		}
	}
	.btn {
		width: 200rpx;
		line-height: 100rpx;
	}
}
.bottombox {
	width: 100%;
	position: fixed;
	bottom: 100rpx;
	left: 0;
}

.cart-content {
	// 删除
	.u-page {
		padding: 0;
	}
	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}
	.swipe-action {
		&__content {
			padding: 25rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}

	// 商品
	.commodity {
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 15rpx;
		border-bottom: 1px solid #ccc;

		.choose {
			margin-right: 15rpx;
		}
		.details {
			background-color: #fafafa;
			flex: 1;
			display: flex;
			.title {
				margin: 30rpx 0;
			}
			.price {
				width: 460rpx;
				.count {
					float: right;
					font-size: 26rpx;
					color: #969799;
					margin-right: 20rpx;
				}
			}
		}
	}
}
</style>
